<template>
  <div class="basetable_container" style="margin-bottom: 15px">
    <el-table ref="table" :data="tableModel" v-bind="$attrs" @selection-change="handleSelectionChange" stripe>
      <el-table-column v-if="isSelect" type="selection" width="55"></el-table-column>
      <el-table-column v-if="hasIndex" type="index" label="序号" header-align="center" align="center" width="80"></el-table-column>
      <template v-for="(item, index) in tableItemConfig">
        <el-table-column v-if="item.slotName" align="center" :key="index" :prop="item.prop" :label="item.label" :width="item.width">
          <template slot-scope="scope">
            <slot :name="item.slotName" :scope="scope" :item="item"></slot>
          </template>
        </el-table-column>
        <el-table-column v-else align="center" :key="index" :prop="item.prop" :label="item.label" :width="item.width">
        </el-table-column>
      </template>
      <el-table-column v-if="hasOperation" label="操作" width="300" align="center">
        <template slot-scope="scope">
          <span v-if="operationOptions.details" type="text" class="tag_primary" size="small" @click="handleDetails(scope.row)">详情</span>
          <span v-if="operationOptions.canDelete" type="text" class="tag_warning" size="small" @click="handleDelete(scope.row)">删除</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'basetable',

  props: {
    tableModel: {
      type: Array,
      default: () => [],
      require: true,
    },
    tableItemConfig: {
      type: Array,
      default: () => [],
    },
    hasIndex: {
      type: Boolean,
      default: false,
    },
    isSelect: {
      type: Boolean,
      default: false,
    },
    operationOptions: {
      type: Object,
      default: () => ({ 'canDelete': false, 'details': false })
    }
  },
  computed: {
    hasOperation() {
      return this.operationOptions.canDelete || this.operationOptions.details
    }
  },
  methods: {
    handleSelectionChange (val) {
      this.$emit('selectionChange', val)
    },
    handleDelete(row) {
      this.$emit('handleDelete',row)
    },
    clearSelection() {
      this.$nextTick(()=>{
        this.$refs.table.clearSelection()
      })
    }
  }
}
</script>
